<template>
  <div class="dashboard-container">
    <div>
      <el-row :gutter="10">
        <el-col :span="6">
          <div>
            <el-card class="usertotal">
              <div class="usertotal-text">
                <span>用户总数</span>
                <i class="el-icon-arrow-right" />
              </div>
              <div class="usertotal-number">1133</div>
              <div class="rising">相较于上一日上升 <span>4</span></div>
              <div class="leftiocn">
                <div class="blue" />
                <div class="green" />
              </div>
            </el-card>
          </div>
          <div>
            <el-card class="userrisk">
              <div class="usertotal-text">
                <span>涉疫风险人数</span>
                <i class="el-icon-arrow-right" />
              </div>
              <div class="usertotal-number">105</div>
              <div class="rising">相较于上一日上升 <span>15</span></div>
              <el-divider />
              <ul>
                <li>
                  <div class="risknumber">
                    <span>往返信息筛查风险人数：</span>
                    <span>15</span>
                  </div>
                </li>
                <li>
                  <div class="risknumber">
                    <span>往返信息筛查风险人数：</span>
                    <span>15</span>
                  </div>
                </li>
                <li>
                  <div class="risknumber">
                    <span>往返信息筛查风险人数：</span>
                    <span>15</span>
                  </div>
                </li>
                <li>
                  <div class="risknumber">
                    <span>往返信息筛查风险人数：</span>
                    <span>15</span>
                  </div>
                </li>
              </ul>
            </el-card>
          </div>
          <div>
            <el-card class="SOStotal">
              <div class="usertotal-text">
                <span>用户总数</span>
                <i class="el-icon-arrow-right" />
              </div>
              <div class="usertotal-number">16</div>
              <div class="SOSinfo">
                <div class="rising">相较于上一日上升 <span> 1 </span></div>
                <div class="SOSnumeber">关联涉疫风险筛查人数 <span> 30 </span></div>
              </div>
              <div class="leftiocn">
                <div class="blue" />
                <div class="green" />
              </div>
            </el-card>
          </div>
        </el-col>
        <el-col :span="6">
          <div>
            <el-card class="frominfo">
              <div class="fromcontol">
                <div class="usertotal-text">
                  <span>往返信息申报数</span>
                  <i class="el-icon-arrow-right" />
                </div>
                <div class="usertotal-number">710</div>
                <div class="fromnumber">相较于上一日上升 <span>4</span></div>
                <div class="fromnumber">相较于上一日上升 <span>4</span></div>
                <div class="fromnumber">相较于上一日上升 <span>4</span></div>
                <el-divider />
              </div>
              <div ref="echartsOne" class="echartsOne" />
              <el-divider />
              <div ref="echartsTwo" class="echartsTwo" />
              <div class="leftiocn">
                <div class="blue" />
                <div class="green" />
              </div>
            </el-card>
          </div>
        </el-col>
        <el-col :span="6">
          <div>
            <el-card class="location">
              <div class="usertotal-text">
                <span>现有场所数量</span>
                <i class="el-icon-arrow-right" />
              </div>
              <div class="usertotal-number">200</div>
              <div class="rising">相较于上一日上升 <span>15</span></div>
              <el-divider />
              <div ref="echartsThree" class="echartsThree" />
              <div class="leftiocn">
                <div class="blue" />
                <div class="green" />
              </div>
            </el-card>
          </div>
        </el-col>
        <el-col :span="6">
          <div>
            <el-card class="usernotice">
              <div class="usertotal-text">
                <div class="work">
                  <span>我的待办工作</span>
                  <div class="noticeRed">2</div>
                </div>
                <i class="el-icon-arrow-right" />
              </div>
              <div class="notice">
                <p>张三三 XX市XX区-XX市XX区往返申报</p>
                <p>2022/07/22</p>
              </div>
              <div class="notice">
                <p>李四 关于XX大厦紧急卫生事件填报 </p>
                <p>2022/07/22</p>
              </div>
              <div class="leftiocn">
                <div class="blue" />
                <div class="green" />
              </div>
            </el-card>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  mounted() {
    const myChart = echarts.init(this.$refs.echartsOne)
    myChart.setOption({
      tooltip: {
        trigger: 'item'
      },
      legend: {
        data: [
          'Direct',
          'Email'
        ]
      },
      series: [

        {
          labelLine: {
            show: false
          },
          type: 'pie',
          radius: ['45%', '60%'],
          data: [
            { value: 1048, name: 'Baidu' },
            { value: 335, name: 'Direct' },
            { value: 310, name: 'Email' },
            { value: 251, name: 'Google' }
          ]
        }
      ]
    })
    const chartTwo = echarts.init(this.$refs.echartsTwo)
    chartTwo.setOption({
      tooltip: {
        trigger: 'item'
      },
      legend: {
        data: [
          'Direct',
          'Baidu'
        ]
      },
      series: [

        {
          labelLine: {
            show: false
          },
          type: 'pie',
          radius: ['45%', '60%'],
          data: [
            { value: 1048, name: 'Baidu' },
            { value: 335, name: 'Direct' }
          ]
        }
      ]
    })
    const chartThree = echarts.init(this.$refs.echartsThree)
    chartThree.setOption({
      xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01]
      },
      yAxis: {
        type: 'category',
        data: []
      },
      series: [
        {
          type: 'bar',
          data: [182, 348, 903, 970, 744, 230]
        }
      ]
    })
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

::v-deep .el-card__body {
  padding: 0px;
}

.usertotal {
  width: 100%;
  height: 175px;
  position: relative;
  padding: 20px;
}

.usertotal-text {
  display: flex;
  justify-content: space-between;

  span {
    font-size: 16px;
  }
}

.usertotal-number {
  font-size: 30px;
  line-height: 46px;
  margin-top: 30px;
}

.rising {
  margin-top: 20px;
  font-size: 14px;
  color: #999;
}

.rising span {
  color: blue;
}

.leftiocn {
  position: absolute;
  top: 20px;
  left: 0px;
}

.blue,
.green {
  width: 3px;
  height: 10px;
  background-color: palegoldenrod;
}

.blue {
  background-color: blue;
}

.green {
  background-color: rgb(7, 220, 7);
}

.userrisk {
  margin-top: 10px;
  width: 100%;
  height: 450px;
  padding: 20px;
}

.userrisk p {
  margin-top: 20px;
  font-size: 14px;
  color: #999;
}

.userrisk ul li {
  list-style: none;
}

.userrisk ul {
  padding-left: 0px;
}

.risknumber {
  padding-top: 20px;
  padding-bottom: 20px;
  font-size: 16px;
  color: #999;
}

.risknumber span:last-child {
  color: blue;
}

.SOStotal {
  margin-top: 10px;
  width: 100%;
  height: 200px;
  position: relative;
  padding: 20px;
}

.SOSnumeber {
  font-size: 14px;
  margin-top: 10px;
  color: #999;
}

.SOSnumeber span:last-child {
  color: blue;
}

.frominfo {
  width: 100%;
  height: 845px;
}

.fromnumber {
  font-size: 14px;
  margin-top: 10px;
  color: #999;
}

.fromnumber span:last-child {
  color: blue;
}

.echartsOne {
  width: 100%;
  height: 300px;
}

.fromcontol {
  padding: 20px;
  padding-bottom: 0px;
}

.echartsTwo {
  width: 100%;
  height: 300px;
}

.location {
  padding: 20px;
  width: 100%;
  height: 850px;
}

.echartsThree {
  width: 100%;
  height: 500px;
}

.usernotice {
  width: 100%;
  height: 850px;
  padding: 20px;
}

.usernotice p:first-child {
  font-size: 14px;
  color: #7a67f7;
  margin-bottom: 0px;
}

.usernotice p:last-child {
  font-size: 14px;
  color: #999;
  margin-top: 10px;
}

.work{
  display: flex;
}

.noticeRed{
  color: #fff;
  background-color: red;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  text-align: center;
  font-size: 12px;
  margin-left: 5px;
}
</style>
